// 组件：底部固定静态评论显示框，赞藏方法不在这儿展示，根据自己需求修改
<template>
  <view class="bottom-comment">
    <!-- 左边静态输入框 -->
    <view class="disableinput" @click.stop="emit('articleCommentInputFocus', 1)">
      <u-icon name='edit-pen' size='20' color='999999'></u-icon> <text style="padding-left:10rpx;">我来评论</text>
    </view>
    <!-- 文章总评论 -->
    <view class="bottom-item">
      <u-icon name="heart-fill" size="24" v-if='detail.is_zan==1' color='#FFB300'></u-icon>
      <u-icon name="heart" size="24" v-else color='#333333'></u-icon>
      <text>{{ detail?.zan_number }}</text>
    </view>
    <!-- 文章总点赞 -->
    <view class="bottom-item">
      <u-icon name="star-fill" size="24" v-if='detail.is_collect==1' color='#FFB300'></u-icon>
      <u-icon name="star" size="24" v-else color='#333333'></u-icon>
      <text>{{ detail?.collect_number }}</text>
    </view>
    <!-- 文章总收藏 -->
    <view class="bottom-item">
     <u-icon name="https://ossresource.miyingbl.com/uploads/20240304/94610cc057d42167004f2984ba4777c2.png"
       size="22"></u-icon>
     <text>{{ detail?.comment_number }}</text>
    </view>
  </view>
</template>

<script setup lang="ts">
const props=defineProps({
  detail:{}
})
const emit = defineEmits([
  'articleCommentInputFocus'
])
</script>

<style lang="scss">
.bottom-comment {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 80;
  width: 100vw;
  min-height: 8vh;
  background-color: #fff;
  box-shadow: 0 0 8rpx 4rpx #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28rpx;

  .disableinput {
    width: 360rpx;
    height: 70rpx;
    background-color: #f6f6f6;
    border-radius: 35rpx;
    font-size: 26rpx;
    color: #767676;
    padding-left: 16rpx;
    display: flex;
    align-items: center;
  }

  .bottom-item {
    display: flex;
    align-items: center;
    .item-icon {
      font-size: 38rpx;
      padding-right: 10rpx;
    }

    .isUp {
      color: $uni-color-primary;
    }

    .item-text {
      font-size: 30rpx;
    }
  }
}
</style>
